header {
  line-height: 2;
  div {
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 1;
    span {
      margin: 0 auto;
    }
  }
}

main {
  margin-top: 35px;
  padding: 10px;
  background-color: #fff;
  .book {
    margin: auto;
    img {
      width: 30%;
    }
    .right li span {
      padding: 3px;
      background-color: #f4f4f4;
    }
  }
  .information {
    line-height: 1.5;
    h3 {
      position: relative;
    }
    h3::after {
      content: "";
      /* 子元素绝对定位 */
      position: absolute;
      width: 23%;
      height: 5px;
      background-color: #ffc107;
      bottom: -2px;
      left: -2px;
    }
  }
  .introduce {
    line-height: 1.5;
    h3 {
      position: relative;
    }
    h3::after {
      content: "";
      /* 子元素绝对定位 */
      position: absolute;
      width: 12%;
      height: 5px;
      background-color: #ffc107;
      bottom: -2px;
      left: -2px;
    }
  }
  .comment {
    h3 {
      position: relative;
    }
    h3::after {
      content: "";
      /* 子元素绝对定位 */
      position: absolute;
      width: 12%;
      height: 5px;
      background-color: #ffc107;
      bottom: -8px;
      left: -2px;
    }
    .head-img {
      width: 10%;
      border-radius: 50%;
    }
  }
}

.bottom {
  height: 50px;
  background-color: #fff;
  padding: 10px 15px;
  position: fixed;
  bottom: 0;
  z-index: 1;
  button {
    padding: 5px 30px;
    font-family: "微软雅黑";
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 5px;
    background-color: #ffc107;
  }
}
